<template>
	<div class="username">
		<div class="user">
			<h3>
				<img src="../../../../public/myimg/null.png" />
				<p @click="getlogin()" v-if="uname==''"> 去登录/注册 </p>
				<p v-else>{{uname}}</p>
			</h3>
			<span id="show">新用户注册送388元大礼包</span>
		</div>
		<div class="card">
			<div>
				<span>未获得</span>
				<img src="../../../../public/myimg/1614671448870.png" />
			</div>
			<h3>
				<label>游侠风户外会员</label>
				<p>全站200+户外线路免费畅玩</p>
			</h3>
			<button @click="getlogin()">立即开通</button>
		</div>
		
	</div>
</template>

<script>
	import Cookies from "js-cookie"
	export default{
		name:'Username',
		data(){
			return{
				uname:''
			}
		},
		methods:{
			getlogin(){
				if (!Cookies.get("name")) {
					this.$router.push('/login')
				}
			}
		},
		created() {
			if (Cookies.get("name")) {
				this.uname=Cookies.get("name")
			}
		},
		mounted() {
			if (Cookies.get('name')) {
				document.getElementById('show').style.display='none'
			}
		}
	}
</script>

<style scoped>
	.username{
		width: 100%;
	}
	.username .user{
		height: 3.3rem;
		background-image: url(../../../../public/myimg/img17.png);
		background-size: 100% 100%;
		display: flex;
		align-items: center;
	}
	.username .user h3{
		padding-left: 0.5rem;
		display: flex;
		align-items: center;
	}
	.username .user h3 img{
		width: 1.5rem;
		border-radius: 50%;
	}
	.username .user h3 p{
		font-size: 0.55rem;
		font-weight: bold;
		padding-left: 0.4rem;
	}
	.username .user span{
		border-radius: 0.3rem;
		background:linear-gradient(to right, #ff6000, #ffa32c);
		color: white;
		font-weight: bold;
		text-align: center;
		padding: 0.05rem;
		width: 3.6rem;
		line-height: 0.4rem;
		position: absolute;
		left: 2.5rem;
		top: 2rem;
	}
	.username .card{
<<<<<<< HEAD
		width: 90%;
		height: 1.5rem;
		margin: 0 auto;
		background-image: url(../../../../public/myimg/card2.png);
		background-size: 100% 100%;
	}
	.username .goods{
		width: 90%;
		height: 3rem;
		margin: 0 auto;
		
	}
	.username .goods h3{
		font-size: 0.5rem;
		font-weight: bold;
		display: block;
		
=======
		width: 85%;
		margin: 0 auto;
		background-image: url(../../../../public/myimg/card2.png);
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		position: relative;
		bottom: 0.5rem;
	}
	.username .card div{
		width: 25%;
		height: 100%;
>>>>>>> 77570f9 (游侠客暂时完成)
	}
	.username .card div img{
		width: 1.4rem;
		height: 60%;
		margin-left: 0.3rem;
		position: relative;
		bottom: 0.1rem;
	}
	.username .card div span{
		background: #c2c2c2;
		width: 1.4rem;
		height: 0.5rem;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		left: 0;
		top: 0;
		z-index: 9;
		border-radius: 0.2rem 0 0.2rem 0;
	}
	.username .card h3{
		color: #fef6a2;
		width: 50%;
	}
	.username .card label{
		font-size: 0.4rem;
		display: inline-block;
		margin-bottom: 0.1rem;
	}
	.username .card button{
		background: #ffeb99;
		border: none;
		line-height: 0.5rem;
		width: 1.8rem;
		border-radius: 0.5rem;
		
	}
</style>
